<template>
	<view class="content">
		<view class="contentHeadBack"></view>
		<!-- 头部信息 -->
		<view class="contentHead">
			<view class="contentHeadBox"></view>
			<view class="contentHeadBoxFont">垚鑫电器财务系统</view>
			<view class="contentHeadBoxFont2" @click="toCompanyIndex">
				<view class="contentBoxFont21">
					<view class="font">公司资产：</view>
					<view class="cost">{{ companyCost.account }}</view>
				</view>
				<!-- <view class="contentBoxFont21">
					<view class="font">流动资金：</view>
					<view class="cost">{{ flowCapital }}</view>
				</view> -->
				<view class="contentBoxFont21">
					<view class="font">税额：</view>
					<view class="cost">{{ companyCost.tax }}</view>
				</view>
			</view>
			<view class="contentHeadBoxFont3" @click="toAssetInject">
				<button>注资</button>
			</view>
		</view>
		<!-- 项目轮播图 -->
		<swiper
			class="contentBody animate__animated"
			:indicator-dots="false"
			:autoplay="true"
			:interval="3000"
			:duration="500"
			:display-multiple-items="1"
			@change="SwiperChange"
			:class="{ animate__flipOutY: isClose }"
		>
			<swiper-item v-for="(item, index) in BodyCards">
				<view class="contentBodyCard" @click="bodyCardEvent(item)"><indexBodyCardVue :propsData="item" /></view>
			</swiper-item>
		</swiper>
		<!-- 日志 -->
		<view class="contentLog">
			<view class="LogComponentVue" v-for="(item, index) in LogComponentVues">
				<LogComponentVue :propsData="item" />
			</view>
		</view>
		<view class="contentFont"></view>
	</view>
</template>

<script>
import Swiper from 'swiper';
import LogComponentVue from '@/components/index/logComponent.vue';
import indexBodyCardVue from '@/components/index/indexBodyCard.vue';
import { request } from '../../request';

export default {
	components: { LogComponentVue, indexBodyCardVue },
	computed: {
		flowCapital() {
			console.log(this.companyCost);
			return this.companyCost.publicCollect + this.companyCost.cashCollect;
		}
	},
	data() {
		return {
			companyCost: {
				publicCollect: null,
				cashCollect: null,
				payCost: null,
				collect: null,
				account: null,
				tax: null
			},
			cost: '100000.00',
			bill: '100000.00',
			current: 0,
			isClose: false,
			BodyCards: [],
			LogComponentVues: [
				{
					users: '张三',
					logText: '新增了元器件',
					componentPart: 'PLC',
					businessTrip: '外出',
					project: '项目1',
					createDate: '2025-03-23'
				},
				{
					id: 44,
					usersId: 1,
					usersName: '王建鹏',
					componentPartId: 122,
					componentPartName: '元件1',
					businessTripId: null,
					businessTripName: null,
					projectId: 25,
					projectName: '公司',
					logText: '增加了设备',
					createTime: 1751706464000
				},
				{
					users: '王五',
					logText: '新建了项目',
					componentPart: 'PLC2',
					businessTrip: '外出2',
					project: '项目3',
					createDate: '2024-03-23'
				}
			]
		};
	},
	onHide() {
		this.isClose = false;
	},
	methods: {
		// 注资导航
		toAssetInject() {
			uni.navigateTo({
				url: '/pages/company/assetInject'
			});
		},
		toCompanyIndex() {
			uni.navigateTo({
				url: '/pages/company/companyIndex'
			});
		},
		SwiperChange(e) {
			this.current = e.detail.current;
		},
		// body卡片被点击时
		bodyCardEvent(item) {
			this.isClose = true;
			setTimeout(() => {
				uni.navigateTo({
					url: `/pages/project/projectItem?id=${item.id}&date=${item.date}&cost=${item.cost}&users=${item.users}&input=${item.input}&output=${item.output}&name=${item.name}&introduce=${item.introduce}`
				});
			}, 500);
		}
	},
	// 加载页面信息
	onLoad() {
		request('public/recommendProjectToken', this.inputs, 'GET').then((res) => {
			if (res.data.code != 200) {
				this.$message.error('   ' + res.data.msg);
				return;
			}

			this.BodyCards = [];
			for (var i = 0; i < res.data.data.length; i++) {
				this.BodyCards.push(res.data.data[i]);
			}
		});

		request('public/selectLog', this.inputs, 'GET').then((res) => {
			if (res.data.code != 200) {
				this.$message.error('   ' + res.data.msg);
				return;
			}

			this.LogComponentVues = res.data.data;
		});
	},
	onShow() {
		request('public/getCompanyCost', this.inputs, 'GET').then((res) => {
			if (res.data.code != 200) {
				this.$message.error('   ' + res.data.msg);
				return;
			}

			this.companyCost = res.data.data;
		});
	}
};
</script>

<style scoped>
/* 总页面 */
.content {
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow-x: hidden !important;
	position: relative;
}

/* 背景样式 */
.contentHeadBack {
	position: absolute;
	width: 150%;
	height: 300rpx;
	background-image: linear-gradient(135deg, #1677ff 0%, #0e56c2 100%);
	border-bottom-left-radius: 100%;
	border-bottom-right-radius: 100%;
	scrollbar-width: none;
	z-index: -1;
}

/* 头部整个白色区域 */
.contentHead {
	width: 650rpx;
	height: 500rpx;
	background-color: white;
	margin-top: 150rpx;
	border-radius: 50rpx;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}

/* 头部的头像 */
.contentHeadBox {
	width: 150rpx;
	height: 150rpx;
	background-color: white;
	margin-top: -80rpx;
	border-radius: 100%;
	background-image: url('/static/tx.jpg');
	background-size: 100% 100%;
}

/* 头部字体部分 */
.contentHeadBoxFont {
	margin-top: 20rpx;
	font-size: 40rpx;
	letter-spacing: 1px;
	font-family: '微软雅黑';
}
/* 第二行的字体区域 - 优化整体布局 */
.contentHeadBoxFont2 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 90%;
	margin-top: 40rpx;
	gap: 30rpx; /* 项目间距 */
}

/* 单个数据项容器 - 优化内部分布 */
.contentBoxFont21 {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 460rpx;
	padding: 20rpx 30rpx;
	background-color: #f8f9fa; /* 浅灰色背景增强区分度 */
	border-radius: 20rpx; /* 圆角设计 */
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); /* 细微阴影增加层次感 */
}

/* 标签文本样式 - 优化字体与间距 */
.font {
	font-size: 28rpx;
	color: #666; /* 深灰色更易读 */
	margin-right: 20rpx; /* 标签与数值间距 */
	white-space: nowrap; /* 防止标签换行 */
}

/* 金额数值样式 - 重点突出设计 */
.cost {
	font-size: 32rpx;
	font-weight: bold; /* 加粗突出 */
	color: #333; /* 深黑色 */
	display: flex;
	align-items: baseline; /* 货币符号与数字基线对齐 */
}

/* 货币符号样式 - 优化位置与大小 */
.cost::before {
	content: '￥';
	font-size: 24rpx;
	margin-right: 5rpx;
	color: #159957; /* 绿色符合财务正向数据视觉习惯 */
}

/* 缴税按钮容器 */
.contentHeadBoxFont3 {
	width: 100%;
	margin-top: 30rpx;
	display: flex;
	justify-content: center;
	padding: 0 30rpx;
}

/* 缴税按钮样式 */
.contentHeadBoxFont3 button {
	width: 300rpx;
	height: 70rpx;
	font-size: 30rpx;
	font-weight: 500;
	color: #ffffff;
	background-color: #159957;
	border: none;
	border-radius: 35rpx;
	box-shadow: 0 6rpx 12rpx rgba(21, 153, 87, 0.25);
	transition: all 0.2s ease;
	letter-spacing: 1rpx;
}

/* 身体部分 */
.contentBody {
	width: 700rpx;
	height: 700rpx;
	max-width: 700rpx;
	margin-top: 50rpx;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
}

/* 身体卡片样式 1个卡片身位540rpx */
.contentBodyCard {
	width: 650rpx;
	/* height: 600rpx; */
	max-height: 800rpx;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	background-color: #ffffff;
	border-radius: 50rpx;
	margin: 0 0 20rpx 485rpx;
	transform: translate(-460rpx);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, 0.05);
}

.contentLog {
	width: 650rpx;
	height: auto;
	margin-top: 50rpx;
}

.contentFont {
	width: 700rpx;
	height: 300rpx;
}
</style>
